import React, {useRef, useState} from "react";
import {Table, Tag} from 'antd';
import CmsActionPanel from "./CmsActionPanel";
import './cmsStyle.scss'
import GeneralTable from "../../view/GeneralTable";

const initialState: any = [];


interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
    tags: any
}

const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: [],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: [],
    },
    {
        key: '4',
        name: 'Disabled User',
        age: 99,
        address: 'Sidney No. 1 Lake Park',
        tags: [],
    },
];


const Cms = () => {

    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    // const [data, setData] = useState(initialState);
    const [pagination, setPagination] = useState(initialState);
    const [loading, setLoading] = useState(false);
    const tableRef = useRef<any>()


    const columns: any = [
        {
            title: 'Name',
            dataIndex: 'name',
            sorter: true,
            render: (name: any) => `${name.first} ${name.last}`,
            width: '20%',
        },
        {
            title: 'Age',
            dataIndex: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: (tags: any) => (
                <span>
                    {tags.map((tag: any) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        if (tag === 'loser') {
                            color = 'volcano';
                        }
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </span>
            ),
        },
        {
            title: 'Action',
            dataIndex: '',
            key: 'x',
            render: () => <a>Delete</a>,
        },
    ];


    function handleTableChange() {

    }

    function handleDelete(id: string) {
        const res: any = {};
        return res;
    }

    function onHandleAdd() {

    }

    function getTableList(params: any) {

        const res: any = {};

        return res;
    }


    return (
        <div className="cms-content">

            <GeneralTable getTableData={getTableList}
                          ref={tableRef}
                          columns={columns}
                          onAdd={onHandleAdd}
                          onDelete={handleDelete}

            ></GeneralTable>

        </div>
    );
};

export default Cms;
